<!--
问卷库编辑页面
-->
<template>
    <div id="main">
        <Header/>
        <div id="center">
            <div class="tab_top">
                <div class="tab">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">问卷调研</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$route.query.id}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="gobackbtn">
                    <el-button size="small" @click="$router.back()">返回</el-button>
                </div>
            </div>
            <div id="middle-btn">
                    <el-button size="mini" @click="newradio(n)">新增单选题</el-button>
                    <el-button size="mini" @click="newcheckbox(n)">新增多选题</el-button>
                    <el-button size="mini" @click="newtext(n)">新增填空题</el-button>
            </div>
            <div id="addquestionnairedetails">

                <el-form :model="form" label-width="100px" class="demo-ruleForm" size="mini">
                  <el-form-item label="问卷名称" prop="name">
                      <el-input v-model="this.$route.query.lookername" maxlength="50" show-word-limit></el-input>
                  </el-form-item>
                  <div class="activeinfo">
                       <el-input type="textarea" v-model="form[0].quest_describe" placeholder="描述" maxlength="1000" show-word-limit ></el-input>
                  </div>
                </el-form>
                  <el-form
                    v-for="(filter,index) in form"
                    style="width: 80%;
                    border: 1px solid black;
                    padding: 10px 50px;
                    margin: 0 auto;"
                    label-width="40px"
                    :key="index">

                    <el-form-item label="题目" style="width: 100%;" >
                      <div
                        style="float: left;color: #2396f5"
                        v-if="filter.option_type == 1 && filter.questionnaires_sort == (index+1)">
                        【单选】
                      </div>
                      <div
                        style="float: left;color: #2396f5"
                        v-else-if="filter.option_type == 2 && filter.questionnaires_sort == (index+1)">
                        【多选】
                      </div>
                      <div
                        style="float: left;color: #2396f5"
                        v-else>
                        【简答题】
                      </div>
                      <input
                        v-model="filter.subject"
                        style="float: left;height: 10px;margin-top: 7px;margin-left: 5px"/>
                    </el-form-item>

                    <el-form-item label="选项" style="width: 100%;">
                      <el-form v-for="(option,index) in optionData" :key="index">
                        <el-form-item
                          v-model="optionDatas"
                          v-if="filter.questionnaires_id == option.questionnaires_id && option.option_type == 1">
                          <el-input
                            style="margin-right: 40px;width: 500px;"
                            v-model="option.option_content">
                          </el-input>
                        </el-form-item>

                        <el-form-item
                          v-model="optionDatas"
                          v-if="filter.questionnaires_id == option.questionnaires_id && option.option_type == 2">
                          <el-input
                            style="margin-right: 40px;width: 500px;"
                            v-model="option.option_content">
                          </el-input>
                        </el-form-item>

                        <el-input
                          v-if="filter.questionnaires_id == option.questionnaires_id && option.option_type == 3"
                          type="textarea"
                          :rows="2"
                          style="margin-right: 40px;width: 500px;"
                          placeholder="请输入内容"
                          v-model="option.option_content">
                        </el-input>
                      </el-form>
                      <div style="float: right;margin-top: -100px">
                          <el-button icon="el-icon-top" circle size="mini" style="margin-left: 20px;"></el-button>
                          <el-button icon="el-icon-bottom" circle size="mini" style="margin-right: 40px"></el-button>
                          <el-button @click="confirm(filter.questionnaires_id)" icon="el-icon-delete" style="font-size: 20px;margin-bottom: 40px;border: 0px;"></el-button><br>
                        <el-radio-group v-model="filter.required" style="margin-left: 20px;">
                          <el-radio :label="true">必填</el-radio>
                          <el-radio :label="false">不必填</el-radio>
                        </el-radio-group><br>
                        <el-radio-group v-model="filter.other_value" style="margin-left: 20px;">
                          <el-radio :label="true">允许其他值</el-radio>
                          <el-radio :label="false">不允许其他值</el-radio>
                        </el-radio-group>
                      </div>
                      <el-form-item label="其他" style="width: 100%;" >
                          <el-input v-model="ruleForm.item1info.num4" size="mini" style="width: 460px;"></el-input>
                      </el-form-item>
                    </el-form-item>

                                            <!--                  <el-form-item label="问卷名称" prop="name">-->
<!--                        <el-input v-model="form.quest_name" maxlength="50" show-word-limit></el-input>-->
<!--                    </el-form-item>-->
<!--                    <div class="activeinfo">-->
<!--                        <el-input type="textarea" v-model="ruleForm.desc" placeholder="描述" maxlength="1000" show-word-limit ></el-input>-->
<!--                    </div>-->

<!--                    <el-card class="box-card" shadow="never">-->
<!--                        <div style="font-size: 12px;">-->
<!--                        <span style="color: #2396f5;">{{n}}.【单选】</span><span>题目:</span>-->
<!--                        <el-input v-model="ruleForm.item1" size="mini" style="width: 500px;"></el-input>-->
<!--                        <el-button icon="el-icon-top" circle size="mini" style="margin-left: 20px;"></el-button>-->
<!--                        <el-button icon="el-icon-bottom" circle size="mini"></el-button>-->
<!--                        <i class="el-icon-delete" style="font-size: 20px;float: right;"></i>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 57px;">-->
<!--                            <span>选项:</span>-->
<!--                            <el-input v-model="ruleForm.item1info.num1" size="mini" style="width: 500px;"></el-input>-->
<!--                            <el-radio v-model="radio" label="1" style="margin-left: 20px;">必填</el-radio>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 87px;">-->
<!--                            <el-input v-model="ruleForm.item1info.num2" size="mini" style="width: 500px;"></el-input>-->
<!--                            <el-radio v-model="radio" label="2" style="margin-left: 20px;">允许其他值</el-radio>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 87px;">-->
<!--                            <el-input v-model="ruleForm.item1info.num3" size="mini" style="width: 500px;"></el-input>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 87px;" v-show="this.radio==2">-->
<!--                            <span>其他:</span>-->
<!--                            <el-input v-model="ruleForm.item1info.num4" size="mini" style="width: 469px;"></el-input>-->
<!--                        </div>-->
<!--                    </el-card>-->


<!--                    <el-card class="box-card" shadow="never" style="margin-top:20px">-->
<!--                        <div style="font-size: 12px;">-->
<!--                        <span style="color: #2396f5;">{{n}}.【多选】</span><span>题目:</span>-->
<!--                        <el-input v-model="ruleForm.item2" size="mini" style="width: 500px;"></el-input>-->
<!--                        <el-button icon="el-icon-top" circle size="mini" style="margin-left: 20px;"></el-button>-->
<!--                        <el-button icon="el-icon-bottom" circle size="mini"></el-button>-->
<!--                        <i class="el-icon-delete" style="font-size: 20px;float: right;"></i>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 57px;">-->
<!--                            <span>选项:</span>-->
<!--                            <el-input v-model="ruleForm.item2info.num1" size="mini" style="width: 500px;"></el-input>-->
<!--                            <el-radio v-model="radio" label="1" style="margin-left: 20px;">必填</el-radio>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 87px;">-->
<!--                            <el-input v-model="ruleForm.item2info.num2" size="mini" style="width: 500px;"></el-input>-->
<!--                            <el-radio v-model="radio" label="2" style="margin-left: 20px;">允许其他值</el-radio>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 87px;">-->
<!--                            <el-input v-model="ruleForm.item2info.num3" size="mini" style="width: 500px;"></el-input>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 87px;" v-show="this.radio==2">-->
<!--                            <span>其他:</span>-->
<!--                            <el-input v-model="ruleForm.item2info.num4" size="mini" style="width: 469px;"></el-input>-->
<!--                        </div>-->
<!--                    </el-card>-->


<!--                    <el-card class="box-card" shadow="never" style="margin-top:20px">-->
<!--                        <div style="font-size: 12px;">-->
<!--                        <span style="color: #2396f5;">{{n}}.【填空】</span><span>题目:</span>-->
<!--                        <el-input v-model="ruleForm.item3" size="mini" style="width: 500px;"></el-input>-->
<!--                        <el-button icon="el-icon-top" circle size="mini" style="margin-left: 20px;"></el-button>-->
<!--                        <el-button icon="el-icon-bottom" circle size="mini"></el-button>-->
<!--                        <i class="el-icon-delete" style="font-size: 20px;float: right;"></i>-->
<!--                        </div>-->
<!--                        <div style="font-size: 12px;margin-top: 10px;margin-left: 57px;">-->
<!--                            <span>填空:</span>-->
<!--                            <el-input v-model="ruleForm.item3.num" size="mini" style="width: 500px;"></el-input>-->
<!--                            <el-radio v-model="radio" label="1" style="margin-left: 20px;">必填</el-radio>-->
<!--                        </div>-->
<!--                    </el-card>-->


<!--                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>-->
                    </el-form>
              <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import Header from "../../../components/Header.vue"
import request from "../../../utils/request";
export default {
    created(){
        this.select()
    },
    data() {
        return {
            n:1,
            radio: '1',
            quest_invest_id:'',
            optionData:[],
            optionDatas:[],
            form:{},
            ruleForm: {
                name: '2020届毕业生就业意向调研',
                desc: '为了准确掌握各位毕业生的就业状况和就业意向，请认真填写如下问卷为了准确掌握各位毕业生的就业状况和就业意向，请认真填写如下问卷为了准确掌握各位毕业生的就业毕业生的毕业生的就业状况和就业意向，请认真填写如下问卷。',
                item1: '这是一个消费观的调查，请您认真填写，您现在的消费水平是什么样的?',
                item1info:{
                    num1 : "消费水平良好",
                    num2 : "消费水平一般消费水平一般消费水平一般消费水平一般消费水平一般消费水平一般消费水消费水平一般消费水平一般消费水平一般",
                    num3 : "消费水平过度",
                    num4 : "",
                },
                item2: '你认为校园安全问题重要吗?',
                item2info:{
                    num1 : "安全",
                    num2 : "不安全",
                    num3 : "十分安全",
                    num4 : "",
                },
                item3: '你对于就业工作有什么建议?',
                item3info:{
                    num : "",
                },

            },
        }
    },
    components: {
        Header
    },
    methods: {
        select(){
            this.quest_invest_id = this.$route.query.quest_invest_id
            request.post("/topicoptions/selectTopicoptions?quest_invest_id="+this.quest_invest_id).then(res => {
                this.form = res;
                console.log(this.form)
            })
            request.post("/topicoptions/SelectAll").then(res => {
                this.optionData = res;
            })
        },
        newradio(){
            this.n++
        },
        newcheckbox(){
            this.n++
        },
        newtext(){
            this.n++
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        confirm(questionnaires_id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post("/questionnaires/deleteQuestionnaires?questionnaires_id="+questionnaires_id).then(res => {
                    var st = res
                    if (st){ //更新
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    }else { //插入
                        this.$message({
                            type:"error",
                            message: "删除失败"
                        })
                    }
                    this.select()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
    },
}
</script>
<style>
#main {
    width: 19.1rem;
    height: 14rem;
    background: #EBEFF0;
}
#center{
    width: 12rem;
    height: 11.75rem;
    margin: 0 auto;
    background: #FFFFFF;
    margin-top: 0.4rem;
}
.tab_top{
    height: 0.64rem;
    border-bottom: solid 2px #f2f2f2;
}
.tab{
    float: left;
    margin-top: 25px;
    margin-left: 24px;
}
.gobackbtn{
    float: right;
    line-height: 0;
    margin-right: 20px;
}
#middle-btn{
    line-height: 0;
    height: 0.8rem;
    border-bottom: solid 2px #f2f2f2;
}
#middle-btn button:nth-child(1){
    margin-left: 20px;
}
#addquestionnairedetails{
    width: 90%;
    margin: 0 auto;
    margin-top: 0.3rem;
}
.activeinfo{
    margin-top: 0.2rem;
    margin-bottom: 24px;
}
textarea{
    min-height: 105.6px !important;
}
</style>
